{% extends 'base/base.html' %}
{% block title %}{{ caipu.title }} - 菜谱详情{% endblock %}

{% block extra-css %}
<style>
/* 步骤时间线 */
.step-wrapper{
    padding-left: 3rem;
    position: relative;
}
.step-wrapper::before{
    content: '';
    position: absolute;
    left: .65rem;
    top: .5rem;
    bottom: .5rem;
    width: 2px;
    background: #dee2e6;
}
.step-dot{
    position: absolute;
    left: 0;
    top: .2rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: #0d6efd;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: bold;
}
</style>
{% endblock %}

{% block main %}
<nav aria-label="breadcrumb" class="mb-4">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url 'main:index' %}">首页</a></li>
    <li class="breadcrumb-item"><a href="{% url 'main:caipu_list' %}">菜谱列表</a></li>
    <li class="breadcrumb-item active" aria-current="page">{{ caipu.title }}</li>
  </ol>
</nav>

<div class="row">
  <div class="col-lg-8 mx-auto">
    <div class="card shadow-sm">
        <!-- 主图 -->
        {% if thumb_images.0 %}
          <img src="{{ thumb_images.0 }}" alt="{{ caipu.title }}" class="card-img-top img-fluid">
        {% else %}
          <div class="bg-light text-center py-5 text-muted">暂无图片</div>
        {% endif %}
        
        <!-- 图片缩略图导航 -->
        {% if thumb_images %}
        <div class="image-thumbnails d-flex flex-wrap gap-2 p-3">
            {% for thumb in thumb_images %}
            <div class="thumbnail-item">
                <img src="{{ thumb }}" alt="缩略图" class="img-thumbnail" style="width: 80px; height: 80px; object-fit: cover;">
            </div>
            {% endfor %}
        </div>
        {% endif %}

      <div class="card-body">
        <h1 class="card-title text-danger mb-2">{{ caipu.title }}</h1>
        {% if caipu.description %}
          <p class="text-muted mb-4">{{ caipu.description }}</p>
        {% endif %}

        <!-- 材料 -->
          <h5 class="fw-bold mb-3">材料准备</h5>
          <div class="mb-4">
            {% if ingredients %}
              <div class="row g-2">
                {% for ingredient in ingredients %}
                  <div class="col-auto">
                    <span class="badge bg-secondary fs-6 px-3 py-2">{{ ingredient }}</span>
                  </div>
                {% endfor %}
              </div>
            {% else %}
              <p class="text-muted">暂无材料信息</p>
            {% endif %}
          </div>

        <!-- 步骤 -->
        <h5 class="fw-bold mb-3">制作步骤</h5>
        {% if steps_with_images %}
          <div class="step-wrapper">
            {% for item in steps_with_images %}
              <div class="position-relative mb-4">
                <span class="step-dot">{{ forloop.counter }}</span>
                <p class="mb-2">{{ item.step }}</p>
                {% if item.image %}
                  <img src="{{ item.image }}" alt="步骤图" class="img-fluid rounded shadow-sm">
                {% endif %}
              </div>
            {% endfor %}
          </div>
        {% else %}
          <p class="text-muted">暂无步骤信息</p>
        {% endif %}

        <!-- 额外做法说明 -->
        {% if caipu.steps %}
          <h5 class="fw-bold mb-3 mt-4">做法说明</h5>
          <div class="bg-light p-3 rounded">
            {{ caipu.steps|linebreaks }}
          </div>
        {% endif %}

        <div class="mt-4">
          <a href="{% url 'main:caipu_list' %}?page={{ back_page }}" class="btn btn-outline-primary">
            <i class="bi bi-arrow-left"></i> 返回菜谱列表
          </a>
        </div>
      </div><!-- /.card-body -->
    </div><!-- /.card -->
  </div><!-- /.col -->
</div><!-- /.row -->
{% endblock %}